:root {
  /* 定义左右两边的颜色变量，方便后面使用 */
  --left-color: rgb(40, 144, 233);
  --right-color: rgb(255, 177, 35);
}
* {
  /* 常规初始化操作 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  /* 父盒子内部元素居中对齐 */
  display: grid;
  place-items: center;
  overflow: hidden;

  /* 左右两边的父盒子都沾满屏幕 */
  width: 100%;
  height: 100vh;

  /* 通过定位让左右两边叠在一起 */
  position: absolute;
}
.box .text {
  /* 文字部分的宽、字体大小、左右边距 */
  width: 80vw;
  font-size: 8vw;
  margin: 0px 10vw;
}
.box .title {
  /* 标题部分稍大一点 */
  font-size: 12vw;
}

#left-box {
  /* 左边盒子默认宽度，等会用 js 控制左边盒子宽度，实现左右移动的效果 */
  width: 70%;
  /* 背景颜色 */
  background-color: var(--left-color);
  /* 显示层级高一些，盖住右边 */
  z-index: 10;
}
#left-box .text {
  /* 左边白色字 */
  color: #f3f3f3;
}
#left-box .title {
  /* 左边标题反色 */
  color: var(--right-color);
}

#right-box {
  /* 右边背景色 */
  background-color: var(--right-color);
}
#right-box .text {
  /* 右边黑色字 */
  color: #3a3a3a;
}
#right-box .title {
  /* 右边标题反色 */
  color: var(--left-color);
}
